<template>
 <div class="bottom-bar">
     <div class="check-content">
        <check-button 
        :is-checked="isSelectAll" 
        class="check-button"
        @click.native="checkClick"/>
        <!-- 组件点击事件要加native -->
        <span>全选</span>
     </div>
     <div class="bottom-price">
         合计：{{totalPrice}}
     </div>
     <div class="calculate">
         去计算({{checkLength}})
     </div>
 </div>
</template>

<script>
import CheckButton from 'components/content/checkButton/CheckButton'
import {mapGetters} from 'vuex'
 export default {
  name:'CarButtonBar',
  data () {
   return {

   };
  },

  components: {
      CheckButton
  },

  computed: {
      ...mapGetters(['cartList']),
      totalPrice(){
          const price=0;
          return "￥"+this.$store.state.cartList.filter( item=>{
                  return item.checked
              }).reduce((preValue,item)=>{
                  return preValue+item.price*item.count
              },0).toFixed(2)
      },
      checkLength(){
          return this.$store.state.cartList.filter(item=>item.checked).length
      },
      isSelectAll(){
          if(this.$store.state.cartList.length===0) return false
          else {
            //    console.log("dd:",this.$store.state.cartList.find(item=>{ !item.checked}))
            //  this.$store.state.cartList.find(item=>{
            //         console.log(item,!item.checked);
            //          return !item.checked
            //       });
           return !(this.$store.state.cartList.find(item=>{return !item.checked}))
          }
      }
  },

  beforeMount() {},

  mounted() {},

  methods: {
      checkClick(){
          if(this.isSelectAll){//全部选中
            this.cartList.forEach(element => {
                element.checked=false
            })
          }else{
              this.cartList.forEach(element => {
                element.checked=true
            })
          }
      }
  },

  watch: {}

 }

</script>
<style scoped>
    .bottom-bar{
        height: 60px;
        background-color: #eee;
        position: relative; 
        display: flex;
       bottom: 20px;
    }
    .check-content{
        display: flex;
        align-items: center;
        width: 60px;
    }
    .check-button{
        width: 22px;
        height: 22px;
    }
    .bottom-price{
        flex: 1;
        line-height: 40px;
        margin-left: 60px;
        display: flex;
        align-items: center;
    }
    .calculate{
        width: 80px;
        background: orange;
        color: white;
        display: flex;
        align-items: center;
        line-height: 40px;
        text-align: center;
        }
</style>